<%@ page import="com.apexedu.portal.constant.Constants" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    request.setAttribute("basePath", basePath);
    String height = (String)request.getAttribute("height");
    String location = (String)request.getAttribute("location");
    String title = (String)request.getAttribute("title");
    String categories = (String)request.getAttribute("categories");
    String yAxis = (String)request.getAttribute("yAxis");
    String series = (String)request.getAttribute("series");
    String pointStart = (String)request.getAttribute("pointStart");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title><%=Constants.ProjectInfo.PROJECT_NAME%>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="${basePath}/resources/css/mh.sdyz.css" rel="stylesheet">
    <script type="text/javascript" src="${basePath}/resources/ui/js/jquery-1.10.2.min.js"></script>
    <script src="${basePath}/resources/js/mh.sdyz.index.js" type="text/javascript"></script>
    <script src="${basePath}/component/highcharts-4.1.7/highcharts.js"></script>
    <script src="${basePath}/component/highcharts-4.1.7/modules/exporting.js"></script>
</head>
<body>
<script>
    var wz='<%=location%>';
    $(function(){
        brandPicTurn();
    })
    function brandPicTurn(){
        $(".brand_detail").hide();
        $(".brand_item").hover(
                function(){
                    $(this).children(".brand_name").hide();
                    $(this).children(".brand_detail").show();
                }
                , function(){
                    $(this).children(".brand_detail").hide();
                    $(this).children(".brand_name").show();
                }
        );
    }
    function add(){
        window.parent.addWin(wz);
    }
    function del(){
        window.parent.delWin(wz);
    }
</script>
<div id="tj_bottom" style="height: <%=height%>px; margin: 0 auto">加载中...</div>
<% if (location!=null&&location.length()>0) {%>

<div class="brand_item">
    <a href="javascript:;" onclick="add();" class="brand_name">
        <img src="${basePath}/resources/images/report/icon_setting.png"         width="28" height="28" border="0" style="position: absolute;right:50px;top:5px;" title="添加报表"/>
    </a>
    <a href="javascript:;" onclick="add();" class="brand_detail">
        <img src="${basePath}/resources/images/report/icon_setting-active.png" width="28" height="28" border="0"  style="position: absolute;right:50px;top:5px;" title="添加报表"/>
    </a>
</div>
<div class="brand_item">
    <a href="javascript:;" onclick="del();" class="brand_name">
        <img src="${basePath}/resources/images/report/icon_delet.png"         width="28" height="28" border="0" style="position: absolute;right:5px;top:5px;" title="清除报表"/>
    </a>
    <a href="javascript:;" onclick="del();" class="brand_detail">
        <img src="${basePath}/resources/images/report/icon_delet-active.png" width="28" height="28" border="0"  style="position: absolute;right:5px;top:5px;" title="清除报表"/>
    </a>
</div>
<%}%>
<script type="text/javascript">
    $(function () {
        setTimeout(
                function () {
                    $('#tj_bottom').highcharts({
                        exporting: {
                            <% if (location!=null&&location.length()>0) {%>
                            enabled: false
                            <%}else{%>
                            enabled: true
                            <%}%>
                        },
                        legend: {
                            enabled: true
                        },
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '<%=title%>',
                            align:'left',
                            x: 50 //center
                        },
                        tooltip: {
                            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    connectorColor: '#000000',
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'

                                },
                                showInLegend: true
                            }
                        },
                        series: [<%=series%>]
                    });
                }, 300
        )
    });
</script>
</body>
</html>